<template>
    <div class="red_template_container">
        <Header v-if="tableTotal == 0"></Header>
        <div class="red_template_container_content">
            <!-- 查询条件 -->
            <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
            <!-- 查询结果 -->
            <ZwTable
                ref="tableRef"
                class="table-box"
                tab-h="initial"
                :option="tableOption"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()"
                @dataChange="onDataChange">
                <template #headerOperate>
                    <el-button v-auth="'ADD_TEMPLATE'" type="primary" @click="ImportStore()">新建模板</el-button>
                </template>
            </ZwTable>
        </div>
    </div>

    <!-- 删除弹框 -->
    <ZWDeletdialog ref="DeletdialogRef" @submit="onSubmit" />
    <!-- 录入客户 -->
    <ImportCustomer ref="ImportCustomerRef" @cancel="closeImportCustomer" @save="getListFun" />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, nextTick, onMounted } from 'vue';

import { deepCopy } from '@/utils/helper';
import { ElMessage, ElImage, ElIcon, ElButton } from 'element-plus';
import ZWDeletdialog from '@/components/ZWDeletdialog.vue';
import ImportCustomer from './components/ImportCustomer.vue';
import { gettemplatelist, gettemplatechange, gettemplatedel } from '@/api/employe/redmanage/redmanageWord';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import Header from './components/Header.vue';
const delId = ref('');
const DeletdialogRef: any = ref(null);
const isShow = ref(0);
const ImportCustomerRef = ref(null);
const defaultParams = {
    template_status: -1
};

const tableRef = ref<HTMLElement | null>(null);
// 获取表格高度
const getTableH = val => {
    nextTick(() => {
        const h = val && tableTotal.value == 0 ? -140 : 0;
        tableRef.value.getTableH(h);
    });
};

const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const tableTotal = ref();
const searchOption = computed(() => {
    return [
        {
            label: '状态',
            name: 'template_status',
            value: '',
            type: 'select',
            placeholder: '请选择',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve([
                            { name: '全部', id: -1 },
                            { name: '已启用', id: 1 },
                            { name: '已禁用', id: 2 }
                        ]);
                    }, 300);
                });
            },
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        }
    ];
});
const search = v => {
    state.searchParams = v;
};
const reset = v => {
    state.searchParams = deepCopy(defaultParams);
};
const tableOption = [
    {
        prop: 'amount',
        label: '红包金额',
        width: 200
    },
    {
        prop: 'wishes',
        label: '祝福语',
        minWidth: 200
    },
    {
        prop: 'grant_total_num',
        label: '发放次数',
        width: 200
    },
    {
        prop: 'grant_total_amount',
        label: '发放总金额',
        width: 200
    },
    {
        prop: 'template_status_value',
        label: '状态',
        width: 200
    },
    {
        prop: 'creator_name',
        label: '创建人',
        width: 200
    },
    {
        prop: 'created_at',
        label: '创建时间',
        width: 200
    },
    {
        prop: 'operate',
        label: '操作',
        width: 260,
        fixed: 'right',
        isOperate: true,
        option({ row }) {
            return [
                {
                    id: 0,
                    name: row.template_status === 1 ? '禁用' : '启用',
                    authCode: 'DISABLE',
                    click: (row, column, index) => {
                        delId.value = row.id;
                        if (row.template_status == 1) {
                            onChange(1);
                        } else {
                            onChange(0);
                        }
                    }
                },
                {
                    id: 2,
                    name: '删除',
                    authCode: 'DEL_TEMPLATE',
                    click: row => {
                        delId.value = row.id;
                        onChange(2);
                    }
                }
            ];
        }
    }
];
const onChange = (num: number) => {
    switch (num) {
        case 0:
            DeletdialogRef.value.appDialog.title = '启用提醒';
            DeletdialogRef.value.content = '确认启用吗？';
            break;
        case 1:
            DeletdialogRef.value.appDialog.title = '禁用提醒';
            DeletdialogRef.value.content = '确认禁用吗？';
            break;
        case 2:
            DeletdialogRef.value.appDialog.title = '删除提醒';
            DeletdialogRef.value.content = '确认删除吗？';
            break;
    }
    isShow.value = num;
    DeletdialogRef.value.appDialog.visible = true;
};
const getListFun = () => {
    tableRef.value.reload();
};
const onSubmit = async () => {
    switch (isShow.value) {
        case 0:
            await gettemplatechange({ id: delId.value, template_status: 1 });
            ElMessage.success('启动成功');
            DeletdialogRef.value.appDialog.visible = false;
            tableRef.value.reload();
            break;
        case 1:
            await gettemplatechange({ id: delId.value, template_status: 2 });
            ElMessage.success('禁用成功');
            DeletdialogRef.value.appDialog.visible = false;
            tableRef.value.reload();
            break;
        case 2:
            await gettemplatedel({ id: delId.value });
            ElMessage.success('删除成功');
            DeletdialogRef.value.appDialog.visible = false;
            tableRef.value.reload();
            break;
    }
};
// 新建模块
const ImportStore = (data: any) => {
    setTimeout(() => {
        ImportCustomerRef.value.appDialog.visible = true;
    }, 0);
};
const closeImportCustomer = () => {
    ImportCustomerRef.value.visible = false;
};
const fetchApi = () => {
    // 获取文件列表
    return gettemplatelist;
};

// 导出表格数据
const onDataChange = (res: any) => {
    tableTotal.value = res.total;
};
onMounted(() => {
    getTableH(true);
});
</script>

<style lang="scss" scoped>
.red_template_container {
    height: calc(100vh - 142px);
    display: flex;
    flex-direction: column;

    .red_template_container_content {
        flex: 1;
        padding: 24px;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .zw-table {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;

            :deep(.el-table) {
                flex: 1;

                .el-table__empty-block {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}
</style>
